

<!-- 售后详情 -->
<template>
	<view class="content">
		
		<!-- header部分 -->
		<view class="header-Container header-height">
			<view class="header-bg"></view>
			<navHeader pageTitle="售后详情" colorTheme="black"></navHeader>
		</view>

		
		<!-- 直接退款 -->
		<view class="service-lists">
			<view class="service-item flex1-center" v-for="(item, index) in afterSaleDetail" :key="index">
				<view class="service-time">{{ timestampToTime(item.trackTime) }}</view>
				<view class="service-bottom flex-center" v-if="item.trackStatus == '10'">
					
					<view class="service-main flex1-center">
						<view class="numberTitle">
							<view class="service-num">{{ index + 1 }}</view>
							<view class="service-title" style="padding-left: 23rpx;">发起申请售后,等待店铺确认</view>
						</view>
						
						<view class="service-label flex-center" style="padding-left: 60rpx;">
							<view>售后编号：</view>
							<view style="flex: 1;">{{ item.returnForm.returnId }}</view>
						</view>
						<view class="service-label flex-center" style="padding-left: 60rpx;">
							<view>申请类型：</view>
							<view style="flex: 1;">{{ item.returnForm.returnType == '1' ? '直接退款' : '退货退款' }}</view>
						</view>
						
						<view class="service-label flex-center" style="padding-left: 60rpx;"> 
							<view>售后问题：</view>
							<view style="flex: 1;">{{ item.returnForm.returnReason }}</view>
						</view>
						{{item.returnForm.returnImgArray}}
						<block v-if="item.returnForm && item.returnForm.returnImgArray && item.returnForm.returnImgArray.length">
							<view v-if="item.returnForm.returnImgArray && item.returnForm.returnImgArray.length" class="img-lists flex-center">
								<image v-for="(img, index) in item.returnForm.returnImgArray" :key="index" :src="imgSite + img" mode="" @click="checkPic(imgSite + img,index)"></image>
								<image v-if="item.returnForm.returnImgArray.length%4 != 0" v-for="(item2, index2) in 4-item.returnForm.returnImgArray.length%4" :key="'a'+index2" style="visibility: hidden;"></image>
							</view>
						</block>
					</view>
				</view>
				<view class="service-bottom flex-center" v-if="item.trackStatus != '10'&&item.trackStatus != '40'">
					<view class="service-num">{{ index + 1 }}</view>
					<view class="service-main flex1-center">
						<view class="service-title" v-if="item.trackStatus == '11'">店铺已拒绝申请</view>
						<view class="service-title" v-if="item.trackStatus == '15'">店铺已同意申请，请等待平台退款</view>
						<view class="service-title" v-if="item.trackStatus == '20'">店铺已同意申请，请尽快寄回商品</view>
						<view class="service-title" v-if="item.trackStatus == '21'">商品已寄出，等待店铺确认收货</view>
						<view class="service-title" v-if="item.trackStatus == '31'">店铺已确认收货，请等待平台退款</view>
					</view>
				</view>
				<view class="service-bottom flex-center" v-if="item.trackStatus == '40'">
					<view class="service-num">{{ index + 1 }}</view>
					<view class="column-div service-main ">
						<view class="service-title">平台完成退款</view>
						<view class="service-label flex-center">
							<view>退款金额：</view>
							<view style="flex: 1;">{{ afterSaleDetail[0].returnForm.fixedPrice }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapState,
	mapMutations
} from 'vuex';

import navHeader from '@/components/nav-header/nav-header';

export default {
	components: {
		navHeader
	},
	data() {
		return {
			icon: {},

			returnId: '',
			afterSaleDetail: {}
		};
	},
	onLoad(options) {
		this.returnId = options.returnId;
		this.getAfterSaleDetail_fun();
	},
	computed: {
		...mapState(['imgSite'])
	},
	methods: {

		// 售后详情
		getAfterSaleDetail_fun() {
			var that = this;
			that.$api.globalUtil.requestAjax({
				url: '/OrderApi/getReturnOrderGoodInfos',
				method: 'POST',
				data: {
					returnId: that.returnId
				},
				success: function(res) {
					if (res.data.success) {
						that.afterSaleDetail = res.data.response;
						if (!that.afterSaleDetail[i].returnForm.returnImg1) return
						for(var i = 0; i < that.afterSaleDetail.length; i++) {
							that.afterSaleDetail[i].returnForm.returnImgArray = that.afterSaleDetail[i].returnForm.returnImg1.split(",");
						}
					}
				}
			});
		},
		// 时间戳转换日期--补0--毫秒
		timestampToTime(timestamp) {
			var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
			var D = date.getDate() < 10 ?  '0'+date.getDate()+ ' ' : date.getDate()+ ' ';
			var h = date.getHours() < 10 ? '0'+date.getHours()+ ':' : date.getHours()+ ':';
			var m = date.getMinutes() < 10 ? '0'+date.getMinutes()+ ':' : date.getMinutes()+ ':';
			var s = date.getSeconds()< 10 ? '0'+date.getSeconds() : date.getSeconds();
			return Y+M+D+h+m+s;
		},
		
		
		//查看图片
		checkPic(pic,index){
			let that = this; 
			var urls = that.afterSaleDetail[0].returnForm.returnImg1.split(",");
			for(var i = 0; i < urls.length; i++) {
				urls[i] = that.imgSite + urls[i];
			}
			uni.previewImage({
				current:pic,
				urls: urls,
				longPressActions: {
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		}
	}
};
</script>

<style lang="less">
page,
.content {
	background: #f5f5f5;
	height: 100%;
}

// header部分
.header-Container {
	width: 100%;
	height: 176rpx;
	box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
	background: rgba(255, 255, 255, 1);

	.leftBtns {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 86rpx;

		.back {
			position: relative;
			z-index: 99;
			margin-left: 17rpx;
			width: 44rpx;
			height: 44rpx;
		}
	}

	.title {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}
}

//售后流程
.afterSaleNode-Container {
	margin-top: 176rpx;

	.nodeTime {
		margin: 0 auto;
		width: 266rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		// font-weight:500;
		color: rgba(153, 153, 153, 1);
		background: rgba(153, 153, 153, 0.2);
		border-radius: 5rpx;
	}
}

.service-lists {
	margin: 20rpx auto;
	width: 694rpx;
}

.service-lists .service-item {
	margin: 36rpx auto 25rpx;
}

.service-item .service-time {
	margin: auto;
	width: 300rpx;
	height: 40rpx;
	line-height: 40rpx;
	background: rgba(230, 230, 230, 1);
	border-radius: 5rpx;
	font-size: 24rpx;
	font-family: MicrosoftYaHei;
	// font-weight: 400;
	color: rgba(153, 153, 153, 1);
	text-align: center;
	margin-bottom: 26rpx;
	white-space: nowrap;
}

.service-item .service-bottom {
	width: 100%;
}

.numberTitle {
	display: flex;
	align-items: center;
	padding-bottom: 18rpx;
}

.service-bottom .service-num {
	align-self: flex-start;
	width: 36rpx;
	height: 36rpx;
	background: #ffe5e8;
	border-radius: 50%;
	font-size: 22rpx;
	font-family: MicrosoftYaHei;
	font-weight: 400;
	color: #FE5E49;
	line-height: 36rpx;
	text-align: center;
	flex: 0 0 36rpx;
}

.service-item .service-bottom {
	background: rgba(255, 255, 255, 1);
	border-radius: 16rpx;
	padding: 28rpx 48rpx 32rpx 34rpx;
	box-sizing: border-box;
	width: 100%;
}

.service-bottom .service-main {
	margin-left: 12upx;
	box-sizing: border-box;
	align-items: flex-start;
	width: 100%;
	align-items: flex-start;
}

.service-main .service-title {
	font-size: 25rpx;
	font-family: MicrosoftYaHei;
	font-weight: 400;
	color: #FE5E49;
	margin-bottom: 21upx;
}

.service-main .service-label {
	font-size: 22rpx;
	font-family: MicrosoftYaHei;
	font-weight: 400;
	color: rgba(102, 102, 102, 1);
	line-height: 33rpx;
	width: 100%;
}

.service-label view {
	// flex: 0 0 130rpx;
	// width: 130rpx;
}

.service-label text {
	flex: 0 0 calc(100% - 110rpx);
	width: calc(100% - 110rpx);
	white-space: pre-wrap;
	word-break: break-all;
}

.service-main .img-lists {
	flex-wrap: wrap;
	width: 100%;
	margin: 10rpx 0;
	padding-left: 60rpx;
	justify-content: space-between;
}

.img-lists image {
	width: 124rpx;
	height: 124rpx;
	margin-bottom: 7rpx;
	border-radius: 7rpx;
	// flex: 0 0 104rpx;
	margin-right: 7rpx;
	border: 1rpx solid #e1e1e1;
	box-sizing: border-box;
}
</style>




